import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../bean/bean_problem.dart';
import 'controller/question_error_controller.dart';

class TopicDrawerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<ProblemModel> requestlist =
        Get.find<AuestionErrorController>().requestList;
    int finishNumber = 0;
    int errorNumber = 0;
    int noFinishNumber = 0;
    for (int i = 0; i < requestlist.length; i++) {
      ProblemModel item = requestlist[i];
      if (item.myAnswer != null && item.myAnswer.length > 0) {
        if (item.rightAnswer == "Y") {
          finishNumber++;
        } else {
          errorNumber++;
        }
      } else {
        noFinishNumber++;
      }
    }

    return Container(
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(8)),
        child: Container(
          padding: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 20),
          width: 300,
          height: 360,
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text(
                    "目录",
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                  )
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Expanded(
                child: ListView.builder(
                  padding: EdgeInsets.zero,
                  itemCount: requestlist.length,
                  itemBuilder: (BuildContext context, int index) {
                    ProblemModel model = requestlist[index];
                    FontWeight fontWeight = FontWeight.w400;
                    Color fontColor = Colors.grey;
                    Color bgColor = Colors.white;
                    double fontSize = 14.0;
                    if (index ==
                        Get.find<AuestionErrorController>().currentIndex) {
                      fontWeight = FontWeight.w600;
                      fontColor = Colors.white;
                      bgColor = Colors.red;
                      fontSize = 16.0;
                    }

                    bool answer =
                        model.myAnswer != null && model.myAnswer.length > 0;

                    return GestureDetector(
                      onTap: () {
                        Get.find<AuestionErrorController>().selectPage(index);
                      },
                      child: Container(
                        padding: EdgeInsets.only(bottom: 10),
                        child: Row(
                          children: [
                            ClipOval(
                              child: Container(
                                color: bgColor,
                                alignment: Alignment.center,
                                width: 22,
                                height: 22,
                                child: Text(
                                  "${index + 1}",
                                  style: TextStyle(
                                      fontWeight: fontWeight, color: fontColor),
                                ),
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Expanded(
                              child: Text(
                                "${model.title.replaceAll("<p>", "").replaceAll("<\/p>", "")}",
                                style: TextStyle(
                                    fontWeight: fontWeight, fontSize: fontSize),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                            Container(
                              child: Icon(
                                answer
                                    ? (model.rightAnswer == 'Y'
                                        ? Icons.check
                                        : Icons.close)
                                    : Icons.priority_high_outlined,
                                size: 8,
                                color: answer
                                    ? (model.rightAnswer == 'Y'
                                        ? Colors.green
                                        : Colors.red)
                                    : Colors.grey,
                              ),
                              padding: EdgeInsets.all(2),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    color: answer
                                        ? (model.rightAnswer == 'Y'
                                            ? Colors.green
                                            : Colors.red)
                                        : Colors.grey,
                                  ),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(20))),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                children: [
                  Container(
                    child: Icon(
                      Icons.check,
                      size: 8,
                      color: Colors.green,
                    ),
                    padding: EdgeInsets.all(2),
                    margin: EdgeInsets.only(right: 4),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.green,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20))),
                  ),
                  Text(
                    "回答正确$finishNumber题",
                    style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(
                    width: 14,
                  ),
                  Container(
                    child: Icon(
                      Icons.close,
                      size: 8,
                      color: Colors.red,
                    ),
                    padding: EdgeInsets.all(2),
                    margin: EdgeInsets.only(right: 4),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.red,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20))),
                  ),
                  Text(
                    "回答错误$errorNumber题",
                    style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                        fontWeight: FontWeight.w600),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 4),
                    child: Icon(
                      Icons.priority_high_outlined,
                      size: 8,
                      color: Colors.grey,
                    ),
                    padding: EdgeInsets.all(2),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20))),
                  ),
                  Text(
                    "未回答$noFinishNumber题",
                    style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                        fontWeight: FontWeight.w600),
                  ),
                  Expanded(child: SizedBox()),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: ClipRRect(
                      child: Container(
                        padding: EdgeInsets.only(
                            left: 12, right: 12, top: 8, bottom: 8),
                        color: Colors.red[900],
                        child: Text(
                          "关闭",
                          style: TextStyle(
                              fontSize: 12,
                              color: Colors.white,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(4)),
                    ),
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.end,
              )
            ],
          ),
        ),
      ),
    );
  }
}
